<template name="rock-shake">
	<view class="shake" @tap="cancel">
		<image class="rockimg" src="/static/shake.png" mode="top"></image>
		<text class="title">{{titleText}}</text>
		<text class="notes">返回结果基于您摇一摇生成的随机数。如无法使用摇一摇，请{{notes}}随机点击屏幕上的一个位置来生成随机数。</text>
	</view>
</template>

<script>
	import sys from '../common/sys.js'

	export default {
		name: 'rock-shake',
		data() {
			return {
				enable: true,
				titleText: this.title,
				createTime: Date.now(),
				notes: ''
			};
		},
		props: {
			title: {
				type: String,
				default: '请摇一摇手机'
			}
		},
		created: function() {
			const self = this
			sys.addShakePhoneCallback(function() {
				if (self && self.enable) {
					self.enable=false
					self.$emit('onrock', Math.random())
				}
			})
			function runRepeat() {
				let now = Date.now()
				let duration = now-self.createTime
				if(duration<7000){
					self.notes = '在'+parseInt((8000-duration)/1000)+'秒后'
					if(self.enable) setTimeout(runRepeat, 500)
				}else{
					self.enable = false
					self.notes = ''
					self.titleText = '请摇一摇或点击屏幕'
				}
			}
			runRepeat()
		},
		beforeDestroy: function() {
			this.enable = false
		},
		methods:{
			cancel(){
				if(this.enable){
					this.$emit('cancel')
				}else{
					this.$emit('onrock', Math.random())
				}
			}
		}
	}
</script>

<style>
	.shake {
		position: fixed;
		top: 0;
		background-color: #2d3132;
		width: 100%;
		height: 100%;
		align-items: center;
		text-align: center;
		flex-direction: column;
		justify-content: space-around;
		display: flex;
		z-index: 200
	}
	
	.rockimg{
		padding-top: 50px;
	}

	.title {
		color: aliceblue;
		font-size: larger;
	}
	
	.notes{
		color: #aaa;
		font-size: small;
		width: 80vw;
		text-align: center;
	}
</style>
